<template>
  <h1>留言板</h1>
  <el-form v-model="recordFormData" style="margin-top: 5px;">
    <el-row>
      <el-col :lg="24">
        <el-form-item>
          <el-input resize="none" :rows="5" placeholder="说点什么吧~╰(￣ω￣ｏ)" type="textarea"
                    v-model="recordFormData.content" :maxlength="25" show-word-limit/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-col :lg="4" :md="4" :sm="8" :xs="12">
        <el-form-item size="small">
          <el-input placeholder="昵称" show-word-limit :maxlength="8" v-model="recordFormData.name"/>
        </el-form-item>
      </el-col>
      <el-col :lg="4" :md="4" :sm="6" :xs="12">
        <el-form-item size="small" style=" padding-left: 20%">
          <el-button style="width: 100%;" type="primary" @click="addRecord">到此一游~</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-tabs type="card" model-value="latest">
    <el-tab-pane label="最新" name="latest">
      <el-row :gutter="1" justify="space-between" align="top" v-for="i in getRowCount()" style="margin-top: 5px;">
        <el-col :span="5" :xs="12"  v-for="item in recordList.slice((i - 1) * 4, i * 4)">
          <el-card :header="'第'+ item.id +'位来访者\n' + item.name" :body-style="{backgroundColor: getRandomColor()}">
            {{item.content}}
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="随机" name="random">
      <el-row :gutter="1" justify="space-between" align="top" v-for="i in getRowCount()" style="margin-top: 5px;">
        <el-col :span="5" :xs="12" v-for="item in getRandomList().slice((i - 1) * 4, i * 4)">
          <el-card :header="'第'+ item.id +'位来访者\n' + item.name" :body-style="{backgroundColor: getRandomColor()}">
            {{item.content}}
          </el-card>
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import store from '../store'

export default {
  name: "Record",
  data() {
    return {
      recordFormData: {
        name: '',
        content: ''
      }
    }
  },
  computed: {
    recordList() {
      return store.getters.getRecordList
    }
  },
  methods: {
    addRecord() {
      let recordListItem = {}
      recordListItem.id = this.recordList.slice(-1)[0].id + 1
      Object.assign(recordListItem, this.recordFormData)
      store.commit('addRecord', recordListItem)
    },
    getRowCount() {
      console.log(Math.ceil(this.recordList.length / 4))
      return Math.ceil(this.recordList.length / 4)
    },
    getRandomColor() {
      return `rgb(102, ${Math.floor(Math.random()*(204-102+1)+102)}, ${Math.floor(Math.random()*(255-102+1)+102)})`
    },
    getRandomList() {
      let randomList = [...this.recordList]
      console.log(randomList)
      randomList.sort(() => Math.random() * 2 > 1 ? 1 : -1)
      return randomList
    }
  }
}
</script>

<style scoped>

</style>